
<link href="background/change/style.css" rel='stylesheet' type='text/css' />
<style>

a.x-gray {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  background: #232323;
}
</style>
<div class="hover-buttons">
	<div class="wrap">
		<div class="bg-effect">
		<h1>Color select</h1>
			<ul class="bt-list">
				<li>
					<a href="#" class="hvr-fade button" title="#F69187" type="#696969">红色</a>
					<a href="#" class="hvr-back-pulse button" title="#16A085">绿色</a>
					<a href="#" class="hvr-sweep-to-right button">蓝色</a>
					
				</li>
				<li>
					<a href="#" class="hvr-sweep-to-left button">紫色</a>
					<a href="#" class="hvr-outline-out button">橙色</a>
					<a href="#" class="hvr-outline-in button">粉色</a>
				</li>
				<li>
					<a href="#" class="x-gray button" title="url(/img/bg.jpg)100% 100%">灰色</a>

				</li>
				
			</ul>
		</div>
	</div>
</div>
<script>
$('.button').click(function(){
	var color = $(this).attr('title');
	$('body').css('background',color);
	var innerColor = $(this).attr('type');
	$('.content-inner').html('').css('z-index',0);
	$('.home').removeClass('hidden').addClass('selector');
	setTimeout(function() { 
		toggleOptions('.selector'); 
		$('.selector button').css('background',innerColor);
	}, 100);
});
</script>